<template>
	<view class="group-wrap">
		<view class="container" v-if="showSataus">
			<view class="group-bureau-header bg-white w100">
				<customTabBar />
				<!-- <view class="add" @click="handleShowGroup"></view> -->
				<view class="search-wrap relative">
					<text v-show="!groupSearch.length" class="iconfontPT iconsousuo"></text>
					<input type="text" v-model="groupSearch" @input="handleSearch" placeholder="搜索组局名" class="text-center w100">
				</view>
			</view>
			<view class="group-bureau-body">
				<Tabs :TabList="groupTypeSearchList" :currentTab="groupTypeChecked" @tabs="tabsChange" :lineWidth="160">
					<TabPane v-for="(item1, index1) in groupTypeSearchList" :key='index1'>
						<view v-if="groupTypeChecked==index1">
							<view class="swiper-box">
								<swiper class="swiper" autoplay="true" interval="5000" indicator-color="rgba(255, 255, 255, .3)"
								 indicator-active-color="#fff">
									<block v-for="(item2, index2) in bannerList" :key="index2">
										<swiper-item class="swiper-item text-center w100 h100">
											<view class="swiper-item w100 h100">
												<image class="img w100 h100" :src="host + item2.img" mode="aspectFill" />
											</view>
										</swiper-item>
									</block>
								</swiper>
							</view>
							<view class="group-list-wrap">
								<view class="group-item" v-for="(item3, index3) in groupList" :key='index3'>
									<groupTpl :groupData="item3" />
								</view>
								<no-data v-if="!groupList.length" />
							</view>
						</view>
					</TabPane>
				</Tabs>
			</view>
			<view class="group-type-wrap">
				<view class="group-type-container">
					<view class="group-type" v-if="showGroupType">
						<view class="mask" @click="handleShowGroup"></view>
						<view class="content clear">
							<navigator hover-class="none" :key="index" v-for="(item, index) in groupTypeList" :url="`/pages/life-circle/add-group/index?groupTypeName=${item.title}&groupTypeId=${item.id}`">
								<view class="item flex-y-center pull-left" v-if="item.title!=='全部'">
									<image class="icon" :src="host + item.icon" mode="aspectFill" />
									<text class="name">{{item.title}}</text>
								</view>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
		<homeTabBar :push="true" @push="handleShowGroup"/>
	</view>
</template>

<script>
	import {
		getGroupType,
		getAllGroup
	} from '.././apis/life-circle/index.js'

	import Tabs from './components/public/tabs.vue'
	import TabPane from './components/public/tabPane.vue'
	import homeTabBar from './home-tab-bar/index.vue';
	import groupTpl from './components/life-circle/group-tpl.vue';
	import customTabBar from './components/life-circle/custom-tab-bar.vue';

	export default {
		data() {
			return {
				page: 1,
				class_id: 0,
				showGroupType: false,
				groupSearch: '',
				groupTypeList: [],
				groupTypeSearchList: [],
				groupTypeChecked: 0,
				showSataus:0,
				bannerList: [],
				groupList: [],
				load: true,
			}
		},
		onShow() {
			let showSataus=uni.getStorageSync('showSataus');
			this.showSataus=showSataus;
			if(!showSataus){
				uni.switchTab({ url:'/pages/new-car' })
				return;
			}
			this.reset()
			this.getGroupTypeList()
			this.getGroupList()
			this.showGroupType = false;
			
			this.$store.dispatch("home-tab-bar/setCurrentTabbar", 2);
			this.$store.dispatch("life-circle/setCurrentTabbar", 0);
		},
		computed: {
			host() {
				return this.$baseHost.car
			}
		},
		components: {
			Tabs,
			TabPane,
			groupTpl,
			homeTabBar,
			customTabBar
		},
		onReachBottom() {
			if (this.load) {
				this.load = false
				this.getGroupList()
			}
		},
		methods: {
			reset() {
				this.load = true
				this.page = 1
				this.groupList = []
			},
			tabsChange(index) {
				this.groupTypeChecked = index
				this.class_id = index ? this.groupTypeList[index - 1].id : 0
				this.reset()
				this.getGroupList()
			},
			handleSearch() {
				this.reset()
				this.$debounce(this.getGroupList, 3000)()
			},
			getGroupList() {
				const {
					latitude,
					longitude
				} = uni.getStorageSync("location")

				let params = {
					page: this.page,
					longitude,
					latitude,
					search: this.groupSearch,
					class_id: this.class_id,
				}
				getAllGroup(params).then(res => {
					if (+res.code === 200) {
						res.data.class.unshift({
							id: 0,
							title: '全部'
						})
						
						this.groupList.push(...res.data.chat);
						this.bannerList = res.data.banner
						this.groupTypeSearchList = res.data.class
						if (res.data.chat.length) {
							this.page = this.page + 1
							this.load = true
						} else {
							this.load = false
						}
					}
				})
			},
			getGroupTypeList() {
				this.$loading.show()
				getGroupType().then(res => {
					if (+res.code === 200) {
						this.groupTypeList = res.data;
						this.$loading.hide();
					}
				})
			},
			handleShowGroup() {
				this.showGroupType = !this.showGroupType
			}
		},
	}
</script>

<style lang="less">
	.group-wrap {
		background-color: #f8f8f8;
		height: auto;
		padding-bottom: 210rpx;
		min-height: 100vh;
		.group-type-wrap {
			.mask {
				position: fixed;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, .5);
				width: 100%;
				height: 100%;
				z-index: 110;
			}

			.group-type-container {
				.group-type {
					.content {
						position: fixed;
						bottom: 160rpx;
						left: 0;
						background-color: rgba(255, 255, 255, .9);
						text-align: center;
						box-sizing: border-box;
						width: 100%;
						z-index: 111;
						padding: 50rpx 30rpx;

						.item {
							width: 33.3%;
							margin-bottom: 25rpx;

							.name {
								margin-top: 20rpx;
							}

							.icon {
								width: 150rpx;
								height: 150rpx;
							}
						}

					}
				}
			}
		}


		.group-list-wrap {
			background: #f8f8f8;
			padding-top: 30rpx;

			.group-item {
				padding: 0 20rpx;
			}
		}

		.add {
			width: 145rpx;
			height: 145rpx;
			position: fixed;
			bottom: 15%;
			right: 0;
			background: url();
			background-size: cover;
			z-index: 111;
		}

		.group-bureau-header {
			padding-top: 20rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 111;
			box-shadow: 0rpx -2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);

			.search-wrap {
				padding: 30rpx 35rpx 20rpx 35rpx;
				height: 60rpx;

				.iconsousuo {
					position: absolute;
					left: 260rpx;
					top: 38rpx;
					font-size: 28rpx;
				}

				input {
					height: 60rpx;
					border-radius: 100rpx;
					background: #f8f8f8;
					box-sizing: border-box;
					padding: 4px 37px 4px 38px;
				}
			}

			.type-selector-wrap {
				white-space: nowrap;
				height: 60rpx;

				.type-selector {
					width: 100vw;
					height: 60rpx;

					.item {
						margin: 0rpx 50rpx;

						&.checked::after {
							position: absolute;
							bottom: -10rpx;
							left: 50%;
							content: '';
							width: 36rpx;
							height: 6rpx;
							background: #E41805;
							display: inline-block;
							border-radius: 20rpx;
							margin-left: -18rpx;
						}
					}
				}
			}
		}

		.group-bureau-body {
			margin-top: 180rpx;

			.tabs {
				.active-switch {
					position: fixed;
					z-index: 111;
					top: 175rpx;
				}

				.tab-pane-view {
					margin-top: 95rpx;
				}
			}

			.swiper-box {
				height: 300rpx;
				width: 705rpx;
				margin: 0rpx auto;
				padding-top: 20px;

				.img {
					border-radius: 15rpx;
				}
			}
		}


	}
</style>
